import 'package:flutter/material.dart';

import 'home/index.dart';
import 'mine/index.dart';

class TabsPage extends StatefulWidget {
  const TabsPage({super.key});

  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  // 底部tabbar List
  final List _tabbarList = [
    {
      'label': '首页',
      'icon': 'assets/tabs/home_default.png',
      'activeIcon': 'assets/tabs/home_active.png'
    },
    {
      'label': '我的',
      'icon': 'assets/tabs/my_default.png',
      'activeIcon': 'assets/tabs/my_active.png'
    }
  ];
  // 底部tabbar 当前选中的index
  int _currentIndex = 0;

  /* // 第一种方案 --> 通过index来判断显示哪个页面
  getTabbarContent() {
    if (_currentIndex == 0) {
      return const HomePage();
    } else if (_currentIndex == 1) {
      return const MinePage();
    }
  } */

  // 第二种方案 -> (性能更优) IndexStacked -> 通过index 指定渲染 (不会每次都销毁重建)
  List<BottomNavigationBarItem> getBottomNavigationBarItems() {
    List<BottomNavigationBarItem> list = [];
    for (var item in _tabbarList) {
      list.add(BottomNavigationBarItem(
        icon: Image.asset(
          item['icon'],
          width: 30,
          height: 30,
        ),
        activeIcon: Image.asset(
          item['activeIcon'],
          width: 30,
          height: 30,
        ),
        label: item['label'],
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // SafeArea 安全区组件
      body: SafeArea(
        child: IndexedStack(
          index: _currentIndex,
          children: const [
            HomePage(),
            MinePage(),
          ],
        ),
      ),
      // 底部的tabbar
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        selectedItemColor: const Color.fromRGBO(85, 145, 175, 1),
        unselectedItemColor: Colors.black,
        currentIndex: _currentIndex,
        items: getBottomNavigationBarItems(),
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
